<template>
  <div class="treatment-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>治疗详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>
      
      <div v-loading="loading">
        <!-- 基本信息 -->
        <el-descriptions :column="2" border>
          <el-descriptions-item label="治疗ID">{{ treatment.id }}</el-descriptions-item>
          <el-descriptions-item label="治疗模式">
            <el-tag :type="getModeType(treatment.mode)">
              {{ getModeText(treatment.mode) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户">{{ treatment.user_nickname }}</el-descriptions-item>
          <el-descriptions-item label="设备ID">{{ treatment.device_id }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ formatDate(treatment.start_time) }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ treatment.end_time ? formatDate(treatment.end_time) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="持续时间">{{ formatDuration(treatment.duration) }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(treatment.status)">
              {{ getStatusText(treatment.status) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 治疗参数 -->
        <el-card style="margin-top: 20px;">
          <template #header>
            <span>治疗参数</span>
          </template>
          <el-descriptions :column="2">
            <el-descriptions-item label="电流强度">{{ formatIntensity(treatment.intensity) }}</el-descriptions-item>
            <el-descriptions-item label="频率">{{ formatFrequency(treatment.frequency) }}</el-descriptions-item>
            <el-descriptions-item label="电极位置">{{ treatment.electrode_position || '-' }}</el-descriptions-item>
            <el-descriptions-item label="治疗部位">{{ treatment.treatment_area || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 治疗过程图表 -->
        <el-card style="margin-top: 20px;">
          <template #header>
            <span>治疗过程</span>
          </template>
          <TreatmentProcessChart :data="processData" :loading="chartLoading" />
        </el-card>
        
        <!-- 治疗日志 -->
        <el-card style="margin-top: 20px;">
          <template #header>
            <span>治疗日志</span>
          </template>
          <el-table :data="logs" style="width: 100%">
            <el-table-column prop="timestamp" label="时间" width="180">
              <template #default="{ row }">
                {{ formatDate(row.timestamp) }}
              </template>
            </el-table-column>
            <el-table-column prop="event" label="事件" width="150" />
            <el-table-column prop="description" label="描述" />
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import TreatmentProcessChart from '@/components/charts/TreatmentProcessChart.vue'
import { getTreatmentDetail } from '@/api/treatment'
import { formatDate, formatDuration, formatIntensity, formatFrequency } from '@/utils/format'

interface Treatment {
  id: string
  user_nickname: string
  device_id: string
  mode: string
  status: string
  start_time: string
  end_time: string | null
  duration: number
  intensity: number
  frequency: number
  electrode_position?: string
  treatment_area?: string
}

interface ProcessDataPoint {
  time: number
  intensity: number
  frequency: number
}

interface Log {
  id: number
  timestamp: string
  event: string
  description: string
}

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const chartLoading = ref(false)
const treatment = ref<Treatment>({
  id: '',
  user_nickname: '',
  device_id: '',
  mode: '',
  status: '',
  start_time: '',
  end_time: null,
  duration: 0,
  intensity: 0,
  frequency: 0
})
const processData = ref<ProcessDataPoint[]>([])
const logs = ref<Log[]>([])

const goBack = () => {
  router.go(-1)
}

const loadTreatmentDetail = async () => {
  const treatmentId = route.params.id as string
  if (!treatmentId) {
    ElMessage.error('治疗ID无效')
    return
  }
  
  loading.value = true
  try {
    // 获取治疗详情
    const response = await getTreatmentDetail(treatmentId)
    treatment.value = response.data
    
    // 模拟获取治疗过程数据
    processData.value = [
      { time: 0, intensity: 0, frequency: 10 },
      { time: 60, intensity: 1.5, frequency: 10 },
      { time: 120, intensity: 2.0, frequency: 10 },
      { time: 180, intensity: 2.0, frequency: 10 },
      { time: 240, intensity: 2.0, frequency: 10 },
      { time: 300, intensity: 1.5, frequency: 10 },
      { time: 360, intensity: 0, frequency: 10 }
    ]
    
    // 模拟获取治疗日志
    logs.value = [
      {
        id: 1,
        timestamp: treatment.value.start_time,
        event: '开始治疗',
        description: '用户开始治疗'
      },
      {
        id: 2,
        timestamp: new Date(new Date(treatment.value.start_time).getTime() + 60000).toISOString(),
        event: '强度调整',
        description: '电流强度调整至1.5mA'
      },
      {
        id: 3,
        timestamp: new Date(new Date(treatment.value.start_time).getTime() + 120000).toISOString(),
        event: '强度调整',
        description: '电流强度调整至2.0mA'
      },
      {
        id: 4,
        timestamp: treatment.value.end_time || new Date().toISOString(),
        event: '结束治疗',
        description: '治疗完成'
      }
    ]
  } catch (error) {
    ElMessage.error('获取治疗详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const getModeType = (mode: string): any => {
  const types: Record<string, string> = {
    'tDCS+': 'primary',
    'tDCS-': 'success',
    'tACS': 'warning'
  }
  return types[mode] || 'info'
}

const getModeText = (mode: string) => {
  const texts: Record<string, string> = {
    'mode_a': '模式A',
    'mode_b': '模式B',
    'mode_c': '模式C'
  }
  return texts[mode.toLowerCase()] || mode
}

const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    'completed': 'success',
    'cancelled': 'danger',
    'ongoing': 'primary',
    'paused': 'warning'
  }
  return types[status.toLowerCase()] || 'info'
}

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    'completed': '已完成',
    'cancelled': '已取消',
    'ongoing': '进行中',
    'paused': '已暂停'
  }
  return texts[status.toLowerCase()] || status
}

onMounted(() => {
  loadTreatmentDetail()
})
</script>

<style scoped lang="scss">
.treatment-detail {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>